<template>
	<view>
		<view class="header">
			<image src="../../static/img/u69.png" mode="scaleToFill"></image>
		</view>
		<view class="user-img">
			<image src="../../static/img/u71.svg" mode="scaleToFill"></image>
		</view>
		<view class="title">
			<text>居家托养服务平台</text>
		</view>
		<view class="login-view">
			<view class="uname-view">
				<text>用户名</text>
				<input type="text" v-model="username" placeholder="请输入用户名" />
			</view>
			<view class="passwor-view">
				<text>密码</text>
				<input type="text" v-model="password" placeholder="请输入密码" password="true" />
			</view>
		</view>
		<view class="button-view">
			<button type="default" @click="login">登录</button>
			<text>*忘记密码请联系管理员</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				password: ""
			}
		},
		methods: {
			login() {
				uni.request({
					url: "http://121.5.35.178:8081/admin/login",
					method: "POST",
					data: {
						password: this.password,
						username: this.username
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.code == 0) {
							uni.redirectTo({
								url: "../luo/serviceList/serviceList"
							})
							uni.setStorageSync("token", res.data.data)
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.header {
		width: 100%;
		height: 130px;
	}

	.header>image {
		width: 100%;
		height: 100%;
	}

	.user-img {
		width: 80px;
		height: 80px;
		margin: 0 auto;
	}

	.user-img>image {
		width: 100%;
		height: 100%;
	}

	.title {
		text-align: center;
		margin-top: 10px;
		font-weight: 600;
		font-size: 18px;
		color: #898989;
	}

	.login-view {
		width: 100%;
		margin-top: 50px;
	}

	.uname-view {
		display: flex;
		border-bottom: 1px solid #F4F4F4;
		padding-bottom: 5px;
	}

	.passwor-view {
		display: flex;
		border-bottom: 1px solid #F4F4F4;
		margin-top: 30px;
		padding-bottom: 5px;
	}

	.login-view text {
		color: #666666;
		width: 50px;
		margin-left: 10px;
	}

	.login-view input {
		margin-left: 52px;
	}

	.button-view {
		margin-top: 70px;
		text-align: center;
	}

	.button-view>button {
		border-radius: 6px;
		background-color: #2168DB;
		width: 95%;
		color: #fff;
	}

	.button-view>text {
		font-size: 10px;
		color: #AAAAAA;
	}
</style>
